import React, { useEffect, useState, } from 'react'
import { NavBar } from 'antd-mobile'
import { InfiniteScroll } from 'antd-mobile'
import axios from 'axios'
import dayjs from 'dayjs'

const App = () => {
   const [list,setList]=useState([])
   const [page,setPage]=useState(1)
   const [hasMore, setHasMore] = useState(true)

   const start="北京";
   const end="三亚";
   const date=dayjs().format("YYYY-MM-DD")

   // 请求接口
   const getData=async()=>{
    const res=await axios.post("/api/trip/train",{start,end,page})
     console.log(res.data.data);
     setList([...list,...res.data.data])
     setPage(page + 1)
     if(res.data.data.length === 0){
     setHasMore(false)
     }
   }
   useEffect(()=>{
    getData()
   },[])
  return (
    <div>
        <NavBar>{start}——{end}</NavBar>
        {/*渲染列表*/}
       <div>
          {
            list.length>0 && list.map((v,i)=>{
               return <dl key={i} className='dl'>
                 <dt>
                  <div>{v.start}—{v.end}</div>
                  <div>{date}</div>
                 </dt>
                 <dd><div>{v.startTime}</div></dd>
                 <dd>
                  <div>二等座:{v.tick.secondTick}</div>
                  <div>一等座:{v.tick.firstTick}</div>
                  <div>商务座:{v.tick.vip}</div>
                 </dd>
               </dl>
            })
          }
       </div>
        <InfiniteScroll loadMore={getData} hasMore={hasMore} />
    </div>
  )
}

export default App
